<template>
  <div class="user-wrapper">
    <div class="content-box">
      <a-avatar icon="user" />
      <span>{{ userName }}</span>
      <span class="out" @click="handleLogout">退出</span>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'UserMenu',
  components: {
  },
  data () {
    return {
      userName: this.$store.getters.roleName ? (this.$store.getters.roleName + ':' + this.$store.getters.loginName) : this.$store.getters.loginName
    }
  },
  methods: {
    ...mapActions(['Logout']),
    handleLogout () {
      console.log(this.$store.getters)
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return this.Logout().then(() => {
            setTimeout(() => {
              this.$ls.clear()
              window.location.reload()
            }, 16)
          }).catch(err => {
            this.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .user-wrapper{
    span {
      color:#1890ff;
      margin-right:10px;
      font-size: 16px;
    }
    .out{
      cursor:pointer;
    }
  }
</style>
